<template>
  <div class="box">
    <form @submit="formSubmit" report-submit>
        <input class="tr fs30" hidden type="text" name="customer_id" v-model.lazy ="use.customer_id">
        <input class="tr fs30" hidden type="text" name="code" v-model.lazy ="use.code">
        <!--  @click="showSinglePicker('customer_id')" -->
        <div class="df jsb aic fs30 item">
          <label for="name"> <span class="mustWrite">*</span> 姓名</label>
          <input class="tr fs30" placeholder="请输入姓名" disabled type="text" v-model.lazy ="customer_name" />
        </div>
        <div class="df jsb aic fs30 item">
          <label><span class="mustWrite">*</span>抽取量(ml)</label>
          <input class="tr fs30" placeholder="请输入抽取量" type="number" min="0.00" step="0.01" name="variance_extracted" v-model.lazy ="use.variance_extracted" />
        </div>
        <div class="df jsb aic fs30 item">
          <label><span class="mustWrite">*</span>存储年限(年)</label>
          <input class="tr fs30" placeholder="请输入存储年限" type="number" name="storage_life_of" v-model.lazy ="use.storage_life_of" />
        </div>
        <div class="df jsb aic fs30 item">
          <label><span class="mustWrite">*</span>初次脂肪间充干细胞需要量(ml)</label>
          <input class="tr fs30" placeholder="请输入需要量" type="number" name="requirement" v-model.lazy ="use.requirement"/>
        </div>
        <div class="df jsb aic fs30 item">
          <label><span class="mustWrite">*</span>脂肪间充干细胞毫升量(ml)</label>
          <input class="tr fs30" placeholder="请输入毫升量" type="number" name="mi_quantity" v-model.lazy ="use.mi_quantity"/>
        </div>
        <div class="df jsb aic fs30 item">
          <label><span class="mustWrite">*</span>抽脂部位</label>
          <input class="tr fs30" placeholder="请输入抽脂部位" maxlength="11" type="text" name="extracted_parts" v-model.lazy="use.extracted_parts"/>
        </div>
        <div class="fs30 item mb20">
          <div class=""><span class="mustWrite">*</span>面部应用部位说明</div>
          <input class="fs30" placeholder="请填写说明" name="application_site" type="textarea" v-model.lazy ="use.application_site" style="min-height: 100rpx"/>
        </div>
        <div class="df jsb aic fs30 item" @click="showTimePicker">
          <label><span class="mustWrite">*</span>抽脂完成时间</label>
          <input class="tr" type="text" placeholder="请选择抽脂完成时间" disabled name='date_time' v-model.lazy ="use.date_time" @click="showDateTime">
        </div>
        <button size="mini" class="add_submit mainBgColor fs30" form-type="submit" data-type="click">确定</button>
      </form>
      <div v-if="show" class="model">
        <van-datetime-picker
          type="datetime"
          title="请选择日期"
          @confirm="dateTimeconfirm"
          @cancel="cancel"
        />
      </div>
      <mpvue-picker ref="mpvuePicker" :mode="mode" :pickerValueDefault="pickerValueDefault" :deepLength = "deepLength" @onChange="onChange" @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import _number from 'lodash/number'
import mpvuePicker from 'mpvue-picker'
import customerRecord from '@/components/customerRecord'
import uuid from 'uuid/v1'
import mSelect from '@/components/m_select'
import { czRecordUpdate, czRecordAdd, czRecordFind, getOrgCusList } from '@/api'

export default {
  components: {
    mpvuePicker,
    customerRecord,
    mSelect
  },
  data () {
    return {
      use: {},
      customer_name: '',
      pickerSingleArray: [],
      pickerValueDefault: [],
      pickerValueArray: [],
      deepLength: 2,
      themeColor: '',
      show_sheet: false,
      isshowTimePicker: false,
      type: '',
      show: false
    }
  },
  methods: {
    showDateTime () {
      if (!this.show) {
        this.show = true
      } else {
        this.show = false
      }
    },
    cancel () {
      this.show = false
    },
    dateTimeconfirm (v) {
      this.use.date_time = dayjs(v.mp.detail).format('YYYY-MM-DD HH:mm:ss')
      this.show = false
    },
    bindDateChange (e) {
      this.use.date_time = e.mp.detail.value
    },
    showSinglePicker (type) {
      this.type = type
      this.pickerValueArray = this['actions' + type]
      this.$refs.mpvuePicker.show()
    },
    onConfirm  (e) {
      this.customer_name = e.label
      this.use[this.type] = e.value[0]
    },
    async formSubmit (v) {
      let result = {}
      let text = ''
      if (!v.mp.detail.value.customer_id || !v.mp.detail.value.variance_extracted || !v.mp.detail.value.storage_life_of || !v.mp.detail.value.requirement || !v.mp.detail.value.mi_quantity || !v.mp.detail.value.extracted_parts || !v.mp.detail.value.application_site || !v.mp.detail.value.date_time) {
        wx.showToast({
          title: '请将必填项填写完整',
          icon: 'none',
          duration: 2000
        })
      } else {
        if (this.query === 'add') {
          result.code = 'KH' + dayjs().format('YYYYMMDDHHmmss') + _number.random(1000, 9999)
          result = await czRecordAdd(this.use)
          text = '新增'
        } else {
          result = await czRecordUpdate(this.use)
          text = '修改'
        }
        if (result.errno === 0) {
          wx.showToast({
            title: text + '成功',
            duration: 2000
          })
          setTimeout(function () {
            wx.navigateBack()
          }, 2000)
        } else {
          wx.showToast({
            title: text + '失败，请重试',
            icon: 'none',
            duration: 2000
          })
        }
      }
    }
  },
  async mounted () {
    let res = await getOrgCusList()
    this.actionscustomer_id = []
    res.data.forEach(element => {
      this.actionscustomer_id.push({
        label: element.name,
        value: element.id
      })
    })
    this.query = this.$mp.query.text
    this.use.customer_id = this.$mp.query.customer_id
    for (let i in this.actionscustomer_id) {
      if (this.use.customer_id === this.actionscustomer_id[i].value) {
        this.customer_name = this.actionscustomer_id[i].label
      }
    }
    if (this.$mp.query.text === 'edit') {
      const data = await czRecordFind(this.$mp.query.id)
      this.use = data.data
    } else {
      this.use = {
        code: 'CZJL' + dayjs().format('YYYYMMDDHHmmss') + _number.random(1000, 9999),
        id: uuid(),
        customer_id: this.$mp.query.customer_id,
        date_time: ''
      }
    }
  }
}
</script>

<style scoped>
  .add_submit{position: fixed !important;width: 100%;left: 0;bottom: 0 !important;border-radius:0;z-index: 5;color: #fff;padding: 20rpx 0}
  .box{height: 90vh;background: #eee;overflow: scroll;padding-top: 2vh;padding-bottom: 8vh}
  .item{border-bottom: 1px solid #eee;background: #fff;padding: 20rpx 30rpx;}
  .mb20{margin-bottom: 20rpx}
  .close{position: absolute !important;right: -25rpx !important; top: -25rpx !important;font-size: 50rpx;}
  .colorgray{color: #242424;}
  .pics{padding: 20rpx;}
  .mustWrite{color: red}
  .model{position: fixed;bottom: 0px;left: 0;z-index: 9;width: 100%;}
</style>
